import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import SignUpBtn from '@/components/SignUpBtn'
import Faq from '@/components/Faq'
import WhyUse from '@/components/WhyUse'
import Work from '@/components/Work'
import Image from 'next/image'
import S3 from '@/images/s-3.png'

export const metadata = {
  title: 'RedGrowth vs. Replyhub | An Alternative to Replyhub',
  description:
    'Discover the number 1 alternative to Replyhub. Learn why RedGrowth is a better option than Replyhub for finding customers on Reddit.',
  alternates: {
    canonical: 'https://www.redgrowth.app/compare/replyhub',
  },
}

export default function Home() {
  return (
    <div className="">
      <div className="bg-[#ff4d4d] text-white">
        <Header />
      </div>
      <header className="container mx-auto py-8 px-4 md:py-12 md:px-6 text-center">
        <div className="space-y-4">
          <h1 class="inline-block p-4 mb-4 md:text-2xl font-semibold bg-gradient-to-r from-[#ff4d4d] to-[#ff9e9e] text-white rounded-full">
            Replyhub Alternative
          </h1>
          <h2 class="text-3xl font-medium text-gray-800 sm:text-5xl">
            <div class="relative inline font-bold text-4xl sm:text-6xl">
              Why Choose<span class="absolute bottom-0 left-0 w-full h-2.5 sm:h-5 bg-[#ff4d4d]/75"></span>
            </div>
            <br />
            RedGrowth over Replyhub?
          </h2>
          <p className="mx-auto sm:px-20 sm:py-5 text-lg text-gray-900 md:text-xl">
            Replyhub offers powerful tools to find thousands of people on Reddit who want your product, but need you
            connect your Reddit account. RedGrowth takes all that to a whole new level{' '}
            <span className="bg-gray-900 text-white">(don't need your own Reddit account)</span> and lets you grow your
            audiences fastly.
          </p>
          <SignUpBtn className="mx-auto py-6 px-6 bg-[#ff4d4d] text-white">Try RedGrowth for Free</SignUpBtn>
        </div>
        <div className="relative mx-auto mt-10 overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10">
          <Image className="w-full" src={S3} alt="Replyhub alternative." />
        </div>
      </header>

      <Work />
      <WhyUse />
      <Faq />
      <Footer />
    </div>
  )
}
